<template>
  <div id="app">
    <h1>父组件</h1>
    <Son ref="sonA" />
    <button @click="change">改变msg</button>
  </div>
</template>

<script>
import Son from "./components/Son";
/* provide inject 父级组件向子级组件传递值 只要上下级关系成立，无论多少层都能传值 */
export default {
  name: "App",
  data() {
    return {
      aaa: "app"
    };
  },
  // 提供属性 provide 对象的格式 传递基本数据类型   也可以是函数的格式  啥都行
  /* provide: {
    msg: "今天天气好晴朗！！",
  }, */
  /* 
  provide inject绑定的数据不是响应式的，当传递是一个可监视的对象时，它是响应式
  */
  provide() {
    return {
      msg: "今天天气好晴朗！！",
      global: this, //传递this即传递当前的组件对象
      obj: {
        name: "小明",
        age: 35
      }
    };
  },
  components: {
    Son
  },
  mounted() {},
  methods: {
    change() {
      this.msg = "下雪了！！";
      console.log(this.msg);
    }
  }
};
</script>

<style></style>
